<script setup>
import { RouterView } from "vue-router";
import { zhCN, dateZhCN } from "naive-ui";
import { onMounted } from "vue";
import SliderNav from "./components/SliderNav.vue";
import UIHeader from "./components/UIHeader.vue";
import UIPlayer from "./components/UIPlayer.vue";
import "@/assets/main.css";

import { useAppStateStore } from "./stores/appState";

const appState = useAppStateStore();

// 根据用户设定，自动调整大小
onMounted(async () => {
  await appState.setWinSize();
});
</script>

<template>
  <n-config-provider preflight-style-disabled :locale="zhCN" :date-locale="dateZhCN" class="h-full"
    :style="{ zoom: (appState.appZoom * 1.0) / 100 }">
    <n-notification-provider>
      <n-modal-provider>
      <n-layout content-class="h-full flex flex-col" class="h-full bg-custom">
        <n-layout-header class="flex flex-row px-2 pr-1 my-header">
          <UIHeader />
        </n-layout-header>
        <n-layout-content class="flex-grow bg-transparent" content-class="h-full bg-transparent">
          <n-layout has-sider class="h-full bg-transparent" content-class="h-full bg-transparent">
            <n-layout-sider collapse-mode="width" :collapsed-width="64" :width="200" :show-trigger="false"
              :native-scrollbar="false" :collapsed="false" class="my-slider">
              <SliderNav />
            </n-layout-sider>
            <n-layout-content class="p-2 my-content" content-style="overflow: hidden;">
              <router-view />
            </n-layout-content>
          </n-layout>

        </n-layout-content>
        <n-layout-footer class="flex flex-col my-player">
          <UIPlayer />
        </n-layout-footer>
      </n-layout>
    </n-modal-provider>
    </n-notification-provider>
  </n-config-provider>
</template>

<style scoped></style>
